<template>
    <div class="homeApp">
        <div class="leftTab">
            <div class="logoBox">
                <div class="logo"></div>
                <div class="logoTitleBox">
                    <div class="logoTitleOne">
                        陕西广电网络
                    </div>
                    <div class="logoTitleTwo">
                        SHAANXIBC&TVNETWORK
                    </div>
                    <div class="logoTitleTherr">
                        智慧新广电
                    </div>
                </div>
            </div>
            <ul>
                <li v-for="(item,index) in tabList" :key='index'>
                    <div :class="{tabLi:true, okTavli:item.show ,childBack:item.backShow}" @click='tabClick(index)'>
                        <div class="tabIco" v-show='item.ico'>
                            <i :class="item.ico"></i>
                        </div>
                        <div class="tabFont" v-show='item.ico'>
                            {{item.name}}
                        </div>
                    </div>
                    <div :class="{tabLiChid:true, okTavli:iten.show}" v-show='item.children' v-for="(iten,ind) in item.children" :key='ind' @click='tabChildClick(index,ind)'>
                        <div :class="{childXian:true,okChild:iten.show}"></div>
                        <div class="child">
                            {{iten.name}}
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="rightForm">
            <div class="rightFormBack">
                <div class="rightFormTitle">
                    陕西广电用户中心管理平台
                </div>
                <div class="rightFormTitleButton">
                    <div class="adminButton" @click='adminClick()'>
                        <div class="administrator">
                            {{adminName}}
                        </div>
                        <div class="adminIco">
                        </div>
                    </div>
                    <div class="adminImg">
                        系统管理员
                    </div>
                    <div class="xian"></div>
                    <div class="exitButton" @click="exitClick()">
                        <div class="exit">
                            退出
                        </div>
                        <div class="exitIco">
                            <i class="icon font_family icon-tuichu-xuanzhong"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="listCenter">
                <router-view></router-view>
            </div>
        </div>
        <div class="exitFixed" v-show="exitBoxShow">
            <div class="exitBox">
                <div class="exitTitle">
                    确认退出当前账号？
                </div>
                <div class="exitBoxBut">
                    <div class="exitCancel" @click="exitCancelClick()">
                        取 消
                    </div>
                    <div class="exitOk" @click='exitOkClick()'>
                        确 认
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        components: {},
        data() {
            return {
                tabList: [],
                exitBoxShow: false, //退出弹框
                adminName: '',
            };
        },
        filters: {},
        created: function () {
            //权限
            let self = this;
            if (sessionStorage.getItem("ADMIN")) {
                let obj = JSON.parse(sessionStorage.getItem("ADMIN"))
                self.adminName = obj.account
            } else {
                this.$router.push({
                    path: "/login"
                });
                sessionStorage.clear()
            }
            if (sessionStorage.getItem("TABLIST")) {
                self.tabList = JSON.parse(sessionStorage.getItem("TABLIST"))
                // 刷新的路由变化
                let pathStr = this.$route.path;
                let pathOne = pathStr.split("/")[2];
                for (let i = 0; i < self.tabList.length; i++) {
                    self.tabList[i].show = false;
                    self.tabList[i].backShow = false;
                    if (self.tabList[i].children) {
                        for (let j = 0; j < self.tabList[i].children.length; j++) {
                            self.tabList[i].children[j].show = false;
                        }
                    }
                    if (self.tabList[i].rout) {
                        if (pathOne == self.tabList[i].rout.split("/")[2]) {
                            self.tabList[i].show = true;
                        }
                    } else {
                        for (let j = 0; j < self.tabList[i].children.length; j++) {
                            if (pathOne == self.tabList[i].children[j].rout.split("/")[2]) {
                                self.tabList[i].children[j].show = true;
                                self.tabList[i].backShow = true;
                            }
                        }
                    }
                }
            } else {
                this.$router.push({
                    path: "/login"
                });
                sessionStorage.clear()
            }

        },
        watch: {
            $route: "fetchData"
        },
        methods: {
            //路由监视
            fetchData() {
                let self = this;
                let pathStr = this.$route.path;
                let pathOne = pathStr.split("/")[2];
                for (let i = 0; i < self.tabList.length; i++) {
                    self.tabList[i].show = false;
                    self.tabList[i].backShow = false;
                    if (self.tabList[i].children) {
                        for (let j = 0; j < self.tabList[i].children.length; j++) {
                            self.tabList[i].children[j].show = false;
                        }
                    }
                    if (self.tabList[i].rout) {
                        if (pathOne == self.tabList[i].rout.split("/")[2]) {
                            self.tabList[i].show = true;
                        }
                    } else {
                        for (let j = 0; j < self.tabList[i].children.length; j++) {
                            if (pathOne == self.tabList[i].children[j].rout.split("/")[2]) {
                                self.tabList[i].children[j].show = true;
                                self.tabList[i].backShow = true;
                            }
                        }
                    }
                }
            },
            //tab
            tabClick(index) {
                let self = this;
                if (self.tabList[index].children) {
                    return;
                }
                self.$router.push({
                    path: self.tabList[index].rout
                });
            },
            //子集点击
            tabChildClick(index, ind) {
                let self = this;
                self.$router.push({
                    path: self.tabList[index].children[ind].rout
                });
            },
            //管理员设置
            adminClick() {
                let self = this;
                for (let i = 0; i < self.tabList.length; i++) {
                    self.tabList[i].show = false;
                }
                self.$router.push({
                    path: "/home/admin"
                });
            },
            //退出
            exitClick() {
                this.exitBoxShow = true;
            },
            //退出弹框取消
            exitCancelClick() {
                this.exitBoxShow = false;
            },
            //确认退出
            exitOkClick() {
                this.exitBoxShow = false;
                sessionStorage.clear();
                this.$router.push({
                    path: "/"
                });
            }
        }
    };
</script>
<style scoped>
    .leftTab {
        height: 100%;
        width: 260px;
        overflow: hidden;
        background: #3e4662;
    }

    .logoBox {
        width: 260px;
        height: 120px;
        background: #212943;
        overflow: hidden;
        display: flex;
    }

    .logo {
        width: 52px;
        height: 50px;
        margin: 42px 11px 38px 15px;
        background: url("../../static/img/logo.png") no-repeat;
        background-size: 100% 100%;
    }

    .logoTitleBox {
        width: 160px;
        height: 100px;
        overflow: hidden;
        margin-top: 35px;
    }

    .logoTitleOne {
        width: 160px;
        height: 25px;
        font-size: 25px;
        font-family: PingFangSC-Medium;
        color: #ffff;
        line-height: 25px;
        letter-spacing: 1px;
    }

    .logoTitleTwo {
        width: 160px;
        height: 10px;
        font-size: 12px !important;
        font-family: PingFangSC-Regular;
        color: #ffff;
        line-height: 10px;
        margin-top: 6px;
        opacity: 0.4;
    }

    .logoTitleTherr {
        width: 160px;
        height: 15px;
        font-size: 15px;
        font-family: PingFangSC-Regular;
        color: #ffff;
        line-height: 15px;
        display: flex;
        margin-top: 3px;
        letter-spacing: 17px;
        opacity: 0.4;
    }

    .tabLi {
        width: 260px;
        display: flex;
        overflow: hidden;
        cursor: pointer;
        color: #b1b5c0;
    }

    .tabLiChid:hover,
    .tabLi:hover {
        background: #3a4d72;
    }

    .tabLiChid {
        display: flex;
        width: 210px;
        height: 60px;
        line-height: 60px;
        padding-left: 50px;
        cursor: pointer;
        color: #b1b5c0;
    }

    .childBack {
        background: #353d57;
    }

    .child {
        width: 160px;
        display: flex;
    }

    .childXian {
        width: 4px !important;
        height: 12px !important;
        background: #b1b5c0;
        margin: 24px 32px;
    }

    .okChild {
        background: white;
    }

    .okTavli {
        background: #2293ff !important;
        color: white !important;
        font-weight: bolder;
        font-size: 16px !important;
    }

    .tabIco {
        width: 20px;
        height: 20px;
        margin: 20px 32px;
        line-height: 20px;
        text-align: center;
        font-weight: normal !important;
    }

    .tabFont {
        width: 180px;
        height: 60px;
        line-height: 60px;
    }

    .rightForm {
        width: calc(100% - 260px);
        height: 100%;
        background: white;
    }

    .rightFormBack {
        width: 100%;
        height: 70px;
        display: flex;
        justify-content: space-between;
        background: linear-gradient(90deg, #76c8f6, #0291fb);
    }

    .rightFormTitle {
        width: 20rem;
        height: 70px;
        line-height: 70px;
        font-size: 1.6rem;
        margin: 0 0rem 0 3rem;
        color: #fff;
    }

    .rightFormTitleButton {
        display: flex;
        align-items: center;
    }

    .adminButton {
        display: flex;
        cursor: pointer;
    }

    .administrator {
        min-width: 10rem;
        height: 70px;
        line-height: 70px;
        margin-right: 8px;
        text-align: right;
        font-size: 18px;
        color: white;
    }

    .adminIco {
        width: 16px;
        height: 70px;
        color: white;
        line-height: 70px;
        margin-right: 12px;
    }

    .adminImg {
        width: 76px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        color: white;
        font-size: 12px;
        border-radius: 8px;
        margin-right: 5px;
        background: linear-gradient(225deg, #c958f9, #9750fb);
    }

    .xian {
        width: 1px;
        height: 36px;
        background: white;
        margin: 17px 27px;
    }

    .exitButton {
        display: flex;
        cursor: pointer;
    }

    .exit {
        width: 36px;
        height: 70px;
        line-height: 70px;
        margin-right: 12px;
        color: white;
        font-size: 18px;
    }

    .exitIco {
        color: white;
        width: 22px;
        height: 70px;
        line-height: 70px;
        margin-right: 20px;
    }

    .listCenter {
        width: 100%;
        background-color: white;
        padding-bottom: 100px;
    }

    .exitFixed {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        position: fixed;
        top: 0;
        left: 0;
    }

    .exitBox {
        width: 570px;
        height: 280px;
        background: rgba(255, 255, 255, 1);
        border-radius: 6px;
        margin-top: 240px;
        margin-left: calc((100% - 570px + 260px) / 2);
        overflow: hidden;
        animation: exitFun 0.5s;
    }

    @keyframes exitFun {
        from {
            transform: translateY(-200px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .exitTitle {
        width: 570px;
        height: 200px;
        line-height: 200px;
        text-align: center;
        font-size: 22px;
        color: #212943;
        font-weight: bold;
    }

    .exitBoxBut {
        width: 570px;
        height: 80px;
        font-size: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #ebecef;
    }

    .exitCancel {
        width: 200px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: white;
        border-radius: 20px;
        background: linear-gradient(315deg, #1e91e8 0%, #43ccff 100%);
        margin-right: 20px;
        cursor: pointer;
    }

    .exitOk {
        width: 200px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 20px;
        border: 1px solid #279de2;
        color: #279de2;
        margin-left: 20px;
        cursor: pointer;
    }
</style>